<template>
  <el-dialog 
    title="导入参数配置" 
    :visible.sync="dialogVisible"
    width="60%"
    append-to-body
    @closed="handleDialogClosed"
  >
    <el-form :model="localForm" label-width="80px" ref="importForm">
      <el-form-item label="配置JSON" prop="jsonStr">
        <el-input
          v-model="localForm.jsonStr"
          type="textarea"
          :rows="15"
          placeholder="请粘贴完整的参数配置JSON（支持之前导出的配置格式）"
          class="json-input"
        ></el-input>
        <div class="json-tips">
          提示：JSON需包含 projectId、projectName、standardCode、paramGroups 核心字段，参数编码需唯一
        </div>
      </el-form-item>
      <el-form-item label="操作选项">
        <el-radio-group v-model="localForm.coverType">
          <el-radio label="cover">覆盖当前配置</el-radio>
          <el-radio label="merge">合并到当前配置（新增参数组）</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleImport" :loading="importing">确认导入</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { cloneDeep } from 'lodash';

export default {
  name: 'ImportDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      required: true,
      default: () => ({
        jsonStr: '',
        coverType: 'cover'
      })
    }
  },
  data() {
    return {
      localForm: this.getDefaultForm(),
      importing: false
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(value) {
        this.$emit('update:visible', value);
      }
    }
  },
  watch: {
    visible: {
      handler(newVal) {
        if (newVal) {
          this.initLocalForm();
        }
      },
      immediate: true
    },
    form: {
      handler() {
        if (this.visible) {
          this.initLocalForm();
        }
      },
      deep: true
    }
  },
  methods: {
    // 获取默认表单
    getDefaultForm() {
      return {
        jsonStr: '',
        coverType: 'cover'
      };
    },

    // 初始化本地表单
    initLocalForm() {
      this.localForm = cloneDeep(this.form) || this.getDefaultForm();
    },

    // 处理导入
    handleImport() {
      if (!this.localForm.jsonStr.trim()) {
        this.$message.warning('请粘贴参数配置JSON');
        return;
      }

      this.importing = true;
      
      // 发出导入事件，传递本地表单数据
      this.$emit('import', cloneDeep(this.localForm));
      
      // 延迟关闭对话框，确保父组件有足够时间处理
      setTimeout(() => {
        this.dialogVisible = false;
        this.importing = false;
      }, 100);
    },

    // 处理取消
    handleCancel() {
      this.dialogVisible = false;
    },

    // 处理对话框关闭
    handleDialogClosed() {
      // 重置本地表单
      this.localForm = this.getDefaultForm();
      // 重置表单验证
      if (this.$refs.importForm) {
        this.$refs.importForm.clearValidate();
      }
    }
  }
};
</script>

<style scoped>
.json-input {
  width: 100%;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
}

.json-tips {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}

.dialog-footer {
  text-align: right;
}
</style>